import React from 'react';
import { inject, observer } from 'mobx-react';
import './index.less';
import { Button } from 'antd';
import { WeaFormItem, WeaSearchGroup, WeaRightMenu, WeaDialogFooter, WeaLocaleProvider, WeaTableEdit } from 'ecCom';
import { WeaSwitch } from 'comsMobx';
import { toJS } from 'mobx';
import WfCenterContent from './WfCenterContent';
import WfSource from "./WfSource";
const getLabel = WeaLocaleProvider.getLabel;

@inject('wfMobileSettingStore')
@observer
export default class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectTabids : [],
            selectTabidStr : ''
        }
    }

    componentDidMount() {
        const { wfMobileSettingStore, scope } = this.props;
        wfMobileSettingStore.setBaseParams({ menuid: scope });
        wfMobileSettingStore.doInit();
    }
    render() {
        const { wfMobileSettingStore } = this.props;
        const { fields, form, showDialog, contentcolumns, operatecolumns, setDialogShow, contentdatas = [], operatedatas = [], selectedOperate = {},setOperateDatas,isWfcenterApp,resetSelectKeys } = wfMobileSettingStore;
        let items = [];
        if(resetSelectKeys){
            this.setState({selectTabids:[],selectTabidStr:''});
            wfMobileSettingStore.resetSelectKeys = false;
        }
        if (isWfcenterApp != "1" && form && form.isFormInit) {
            const formParams = form && form.getFormParams();
            const isAll = formParams && formParams.sourcetype == 0;
            fields.map(field => {
                const domkey = field.domkey[0];
                if (domkey === "sourcetype" || (domkey === "workflowids" && !isAll) || domkey === "showCopy") {
                    items.push({
                        com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ie0gsk@${domkey}`}
                            label={`${field.label}`}
                            labelCol={{ span: `${field.labelcol}` }}
                            wrapperCol={{ span: `${field.fieldcol}` }}
                            error={form.getError(field)}
                            tipPosition="bottom"
                        >
                            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@6867w7@${domkey}`} fieldConfig={field} form={form} formParams={formParams} />
                        </WeaFormItem>),
                        col: 1
                    });
                }
            });
        }
        return (
            <div className="wf-mobile-setting">
                <div className="wf-mobile-setting-content">
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@2iai8v`} {...this.getMoreBtns()}>
                        {isWfcenterApp === "1" ?
                            <div className="wf-mobile-setting-wfcenter">
                                <WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@t06rck`}
                                    columns={toJS(contentcolumns)}
                                    datas={contentdatas}
                                    title={getLabel(521936, '内容来源')}
                                    draggable={true}
                                    showAdd={true}
                                    showCopy={false}
                                    showDelete={true}
                                    addFunc={this.addFunc}
                                    deleteType={'func'}
                                    deleteFunc={this.deleteFunc}
                                    onRowSelect={this.onCheckContent}
                                    addType={'func'}
                                    onChange={(data) => {
                                        wfMobileSettingStore.contentdatas = data;
                                    }}
                                    selectedRowKeys={this.state.selectTabids}
                                />
                                <WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@s77fdb`}
                                    columns={toJS(operatecolumns)}
                                    datas={toJS(operatedatas)}
                                    title={getLabel(521935, '操作菜单设置')}
                                    draggable={true}
                                    showAdd={false}
                                    showCopy={false}
                                    showDelete={false}
                                    onRowSelect={this.onCheckEnable}
                                    getRowSelection={() => { return false; }}
                                    //deleteConfirm={true}
                                    selectedData={toJS(selectedOperate)}
                                    onChange={(data) => {
                                        setOperateDatas(data);
                                    }}
                                />
                            </div> : <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ot5787`} needTigger={false} showGroup={true} items={items} />}
                    </WeaRightMenu>
                </div>
                <WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@puf3vp`} buttons={this.getButtons()} moreBtn={this.getMoreBtns()} />
                <WfCenterContent ecId={`${this && this.props && this.props.ecId || ''}_WfCenterContent@3f65ga`} wfMobileSettingStore={wfMobileSettingStore} setDialogShow={setDialogShow} isShow={showDialog.contentSetting}></WfCenterContent>
                <WfSource ecId={`${this && this.props && this.props.ecId || ''}_WfSource@px4iqn`} wfMobileSettingStore={wfMobileSettingStore} setDialogShow={setDialogShow} isShow={showDialog.newflow}></WfSource>
            </div>
        )
    }
    getButtons() {
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9177h9@save`} type='primary' onClick={this.doSave}>{getLabel(86, '保存')}</Button>);
        return buttons;
    }
    getMoreBtns() {
        let btns = [];
        btns.push({
            key: '0',
            icon: <i className='icon-coms-Preservation' />,
            content: getLabel(86, '保存'),
            onClick: key => this.doSave(),
        });
        return { datas: btns };
    }
    doSave = () =>  {
        const { wfMobileSettingStore, onCancel } = this.props;
        const { form } = wfMobileSettingStore;
        const formParams = form && form.getFormParams();
        const isAll = formParams && formParams.sourcetype == 0;
        if (isAll) {
            wfMobileSettingStore.doSave(onCancel);
        } else {
            form.validateForm().then(f => {
                if (f.isValid) {
                    wfMobileSettingStore.doSave(onCancel);
                } else {
                    f.showErrors();
                }
            });
        }
    }

    //流程中心内容设置加号
    addFunc = ()  => {
        const { wfMobileSettingStore } = this.props;
        const { setDialogShow } = wfMobileSettingStore;
        setDialogShow('contentSetting', true, {tabid:-1});
    }

    //流程中心内容设置减号
    deleteFunc = () =>  {
        const { wfMobileSettingStore } = this.props;
        const { doDelMobilecenterConfig } = wfMobileSettingStore;
        doDelMobilecenterConfig({selectTabids:this.state.selectTabidStr});
    }

    //流程中心操作菜单设置修改是否启用
    onCheckEnable = (sRowKeys, rows, dataIndex, checkedDatas) => {

        if (checkedDatas && checkedDatas.enable) {

            //选中的行序号
            const enableRows = checkedDatas.enable;
            const { wfMobileSettingStore } = this.props;
            const { operatedatas = [],setOperateDatas } = wfMobileSettingStore;

            operatedatas.map((data,index) => { 
                if(enableRows.filter(rowid => rowid === index).length > 0){
                    data.enable = '1'; 
                }else{
                    data.enable = '0'; 
                }
            });

            setOperateDatas(operatedatas);
        }
    }

    //流程中心操作菜单设置修改是否启用
    onCheckContent = (sRowKeys, rows, dataIndex, checkedDatas) => {
        if(rows){
            let _selectTabids = [];
            let _selectTabidStr = '';
            rows.map((item) => { 
                _selectTabids.push(item.key);//选中项受控
                _selectTabidStr += item.tabid + ",";//选中项tabid
            });
            if(_selectTabidStr.length > 0){
                _selectTabidStr = _selectTabidStr.substring(0,_selectTabidStr.length-1);
            }
            this.setState({selectTabids:_selectTabids,selectTabidStr:_selectTabidStr});
        }
    }
}